<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="planes.css" />
	</head>
	<body>
		<div id = "body_main" class = "main">
			<ul id = "options" class = "options">
				<li value = "1">超级困难</li>
				<li value = "2">非常困难</li>
				<li value = "3">有点困难</li>
				<li value = "4">非常简单</li>
			</ul>
		</div>
	</body>
</html>
<script>
	window.onload = function(){
		new Engine();
	}
	function Engine(){
		this.ele = document.getElementById("body_main");
		this.oList = document.getElementsByTagName("li");
		this.init();
	}
	Engine.prototype = {
		init : function(){
			var that = this;
			for(var i = 0;i < this.oList.length;i ++){
				this.oList[i].onclick = function(){
					this.parentNode.remove(this);
					that.loadPage();
					that.frequecy = this.index;
				}
			}
		},
		loadPage : function(){
			this.logo = createEle("div","logo");
			appendBody(this.logo);
			this.loading = createEle("div","loading");
			appendBody(this.loading);
			var that = this;
			var index = 1;
			this.loadingTimer = setInterval(function(){
				that.loading.style.background = "url(images/loading"+(index ++ % 3 + 1)+".png) no-repeat";
			},500)
			var positionY = 0;
			setInterval(function(){
				that.ele.style.backgroundPositionY = ++positionY + "px";
			},30)
			setTimeout(function(){
				that.logo.remove();
				that.loading.remove();
				clearInterval(that.loadingTimer);
				that.startGame();
			},3000)
		},
		startGame : function(){
			Plane.init();
			Plane.fire(this.frequecy);
			this.createEnemy();
		},
		createEnemy : function(){
			setInterval(function(){
				Math.random() > 0.5 ? new Enemy(0) : "";
			},1000)
			setInterval(function(){
				Math.random() > 0.5 ? new Enemy(1) : "";
			},3000)
			setInterval(function(){
				Math.random() > 0.3 ? new Enemy(2) : "";
			},5000)
		}
	}
	var Plane = {
		ele : createEle("div","my-warplain"),
		init: function(){
			appendBody(this.ele);
			this.ele.style.left = document.documentElement.clientWidth/2 - this.ele.offsetWidth/2 + "px";
			this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + "px";
			this.sport();
		},
		sport : function(){
			var body_main = document.getElementById("body_main");
			var that = this;
			document.onmousemove = function(evt){
				var e = evt || window.event;
				var left = e.pageX - that.ele.offsetWidth/2 ;
				var top = e.pageY - that.ele.offsetHeight/2;
				if(left <= body_main.offsetLeft){
					left = body_main.offsetLeft;
				}else if(left >= body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth){
					left = body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth;
				}
				that.ele.style.left = left + "px";
				that.ele.style.top = top + "px";
			}
		},
		fire : function(frequecy){
			var defaultFrequecy = 200;
			switch(frequecy){
				case 0 : defaultFrequecy = 800; break;
				case 1 : defaultFrequecy = 500; break;
				case 2 : defaultFrequecy = 200; break;
				case 3 : defaultFrequecy = 50;
			};
			var id = 0;
			var that = this;
			setInterval(function(){
				that.bullet.push(new Bullet(id));
				id ++;
			},defaultFrequecy);
		},
		bullet : []
	}
	function Bullet(id){
		this.id = id;
		this.ele = createEle("div","bullet");
		this.init();
	}
	Bullet.prototype = {
		init : function(){
			this.ele.id = this.id;
			appendBody(this.ele);
			this.ele.style.left = Plane.ele.offsetLeft + Plane.ele.offsetWidth/2 - this.ele.offsetWidth/2 + "px";
			this.ele.style.top = Plane.ele.offsetTop - this.ele.offsetHeight + "px";
			this.sport();
		},
		sport : function(){
		  var that = this;
		  this.timer = setInterval(function(){
		  	that.ele.style.top = that.ele.offsetTop - 15 + "px";
		  	if(that.ele.style.top <= 15){
		  		thst.ele.boom();
		  	}
		  },50);
		},
		boom : function(){
			this.ele.className = "bullet-die";
			clearInterval(this.timer);
			var that = this;
			setTimeout(function(){
				that.ele.remove();
				for(var i = 0;i < Plane.bullet.length;i ++){
					if(that.ele.id == Plane.bullet[i].id){
						Plane.bullet[i].splice(i,1);
					}
				}
			},50)
		}
	}
	function Enemy(type){
		this.type = type;
		this.init();
	}
	Enemy.prototype = {
		init: function(){
			switch(this.type){
				case 0 : this.ele = createEle("div","enemy-small");
				         this.ps = 1;
				         this.speed = 15;
				         break;
				case 1 : this.ele = createEle("div","enemy-middle");
				         this.ps = 5;
				         this.speed = 10;
				         break;
				case 2 : this.ele = createEle("div","enemy-large");
				         this.ps = 10;
				         this.speed = 3;
			}
			appendBody(this.ele);
			this.position();
		},
		position : function(){
			var body_main = document.getElementById("body_main");
			this.ele.style.left = ranInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
			this.ele.style.top = 0;
			this.sport();
		},
		sport : function(){
			var that = this;
			this.timer = setInterval(function(){
				that.ele.style.top = that.ele.offsetTop + that.speed + "px" ;
				if(that.ele.offsetTop >= document.documentElement.clientHeight){
					that.ele.remove();
					clearInterval(that.timer);
				}
				that.collision();
			},50);
			
			
		},
		collision : function(){
			for(var i = 0;i < Plane.bullet.length;i ++){
				if(!(Plane.bullet[i].ele.offsetLeft + Plane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < Plane.bullet[i].ele.offsetLeft)){
					if(!(Plane.bullet[i].ele.offsetTop + Plane.bullet[i].ele.offsetHeight < this.ele.offsetTop || this.ele.offsetTop + this.ele.offsetHeight < Plane.bullet[i].ele.offsetTop)){
						Plane.bullet[i].boom();
						this.ps --;
						if(this.ps <= 0){
							this.ele.remove();
						}
					}
				}
			}
		}
	}
	Element.prototype.remove = function(){
		this.parentNode.removeChild(this);
	}
	function createEle(target,className){
		var ele = document.createElement(target);
		ele.className = className;
		return ele;
	}
	function appendBody(ele){
	   document.body.appendChild(ele);
	}
	function ranInt(min,max){
		return Math.floor(Math.random() * (max - min + 1) + min);
	}
</script>